<template>
  <div class="containerBox">
    <el-button-group class="toolbar">
      <el-button type="primary" size="mini" @click="handleUndo">后退</el-button>
      <el-button type="success" size="mini" @click="handleRedo">前进</el-button>
      <!-- <el-button type="success" size="mini" @click="handleZoom(0.1)">放大</el-button> -->
      <!-- <el-button type="success" size="mini" @click="handleZoom(-0.1)">缩小</el-button> -->
      <!-- <el-button type="success" size="mini" @click="handleZoom()">重置大小</el-button> -->
      <el-button type="warning" size="mini" @click="handleDownloadBpmn" ref="downloadLink">下载BPMN</el-button>
      <!-- <el-button type="success" size="mini" @click="handleDownloadSvg">下载SVG</el-button> -->
      <!-- <el-button type="warning" size="mini" @click="createNew">新建BPMN</el-button> -->
      <el-upload
        style="display: inline-block;"
        :file-list="fileList"
        class="upload-demo"
        action
        :auto-upload="false"
        :show-file-list="false"
        :on-change="handleOnchangeFile"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
      >
        <el-button type="danger" size="mini">导入</el-button>
      </el-upload>
    </el-button-group>
    <!-- <div ref="container" id="container">
      <div class="canvas" ref="canvas" />
    </div>-->
    <div class="canvas" ref="canvas" />

    <panel v-if="bpmnModeler" :modeler="bpmnModeler" />
    <!-- <shuxing v-if="bpmnModeler" :modeler="bpmnModeler" /> -->
  </div>
</template>
<script>
import BpmnModeler from "bpmn-js/lib/Modeler";
import CustomPaletteProvider from "@/bmpn/customPalette/index.js";
// import camundaExtension from "@/bmpn/customPalette/camunda.json";

// import shuxing from '@/bmpn/shuXing.vue'
import panel from "./PropertyPanel"; // 属性面板

import BpmData from "@/bmpn/customPalette/BpmData";

export default {
  components: {
    // shuxing
    panel
    // nodeevent,
    // linear
  },
  name: "index",
  data() {
    return {
      containerEl: null,
      bpmnModeler: null,
      fileList: [],
      bpmData: new BpmData(),
      form: {
        id: "",
        name: "",
        color: null
      },
      scale: 1
    };
  },
  mounted() {
    // this.containerEl = document.getElementById("container");
    const canvas = this.$refs.canvas;
    this.bpmnModeler = new BpmnModeler({
      container: canvas,
      // container: this.containerEl
      // moddleExtensions: { camunda: camundaExtension },
      additionalModules: [CustomPaletteProvider]
    });

    // this.create();
    // 新增流程定义
    this.createNewDiagram();
  },
  methods: {
    // 创建一个新的
    createNew() {
      this.$confirm("确定要重新创建一个BPMN?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "创建成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    create() {
      this.bpmnModeler.createDiagram(() => {
        this.bpmnModeler.get("canvas").zoom("fit-viewport");
        this.adjustPalette();
      });
    },
    createNewDiagram() {
      const bpmnXmlStr = `
      <?xml version="1.0" encoding="UTF-8"?>
        <bpmn2:definitions xmlns:bpmn2="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="sample-diagram" targetNamespace="http://bpmn.io/schema/bpmn" xsi:schemaLocation="http://www.omg.org/spec/BPMN/20100524/MODEL BPMN20.xsd">
          <bpmn2:process id="process1567044459787" name="流程1567044459787">
            <bpmn2:documentation>描述</bpmn2:documentation>
            <bpmn2:startEvent id="StartEvent_01ydzqe" name="开始">
              <bpmn2:outgoing>SequenceFlow_1qw929z</bpmn2:outgoing>
            </bpmn2:startEvent>
            <bpmn2:sequenceFlow id="SequenceFlow_1qw929z" sourceRef="StartEvent_01ydzqe" targetRef="Task_1piqdk6" />
            <bpmn2:userTask id="Task_1piqdk6" name="请假申请">
              <bpmn2:incoming>SequenceFlow_1qw929z</bpmn2:incoming>
              <bpmn2:outgoing>SequenceFlow_11h4o22</bpmn2:outgoing>
            </bpmn2:userTask>
            <bpmn2:exclusiveGateway id="ExclusiveGateway_0k39v3u">
              <bpmn2:incoming>SequenceFlow_11h4o22</bpmn2:incoming>
              <bpmn2:outgoing>SequenceFlow_1iu7pfe</bpmn2:outgoing>
              <bpmn2:outgoing>SequenceFlow_04uqww2</bpmn2:outgoing>
            </bpmn2:exclusiveGateway>
            <bpmn2:sequenceFlow id="SequenceFlow_11h4o22" sourceRef="Task_1piqdk6" targetRef="ExclusiveGateway_0k39v3u" />
            <bpmn2:sequenceFlow id="SequenceFlow_1iu7pfe" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_10fqcwp" />
            <bpmn2:userTask id="Task_10fqcwp" name="经理审批">
              <bpmn2:incoming>SequenceFlow_1iu7pfe</bpmn2:incoming>
              <bpmn2:outgoing>SequenceFlow_1xod8nh</bpmn2:outgoing>
            </bpmn2:userTask>
            <bpmn2:sequenceFlow id="SequenceFlow_04uqww2" sourceRef="ExclusiveGateway_0k39v3u" targetRef="Task_15n23yh" />
            <bpmn2:userTask id="Task_15n23yh" name="总部审批">
              <bpmn2:incoming>SequenceFlow_04uqww2</bpmn2:incoming>
              <bpmn2:outgoing>SequenceFlow_0c8wrs4</bpmn2:outgoing>
            </bpmn2:userTask>
            <bpmn2:exclusiveGateway id="ExclusiveGateway_1sq33g6">
              <bpmn2:incoming>SequenceFlow_0c8wrs4</bpmn2:incoming>
              <bpmn2:incoming>SequenceFlow_1xod8nh</bpmn2:incoming>
              <bpmn2:outgoing>SequenceFlow_0h8za82</bpmn2:outgoing>
            </bpmn2:exclusiveGateway>
            <bpmn2:sequenceFlow id="SequenceFlow_0c8wrs4" sourceRef="Task_15n23yh" targetRef="ExclusiveGateway_1sq33g6" />
            <bpmn2:sequenceFlow id="SequenceFlow_1xod8nh" sourceRef="Task_10fqcwp" targetRef="ExclusiveGateway_1sq33g6" />
            <bpmn2:endEvent id="EndEvent_0pnmjd3">
              <bpmn2:incoming>SequenceFlow_0h8za82</bpmn2:incoming>
            </bpmn2:endEvent>
            <bpmn2:sequenceFlow id="SequenceFlow_0h8za82" sourceRef="ExclusiveGateway_1sq33g6" targetRef="EndEvent_0pnmjd3" />
          </bpmn2:process>
          <bpmndi:BPMNDiagram id="BPMNDiagram_1">
            <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="process1567044459787">
              <bpmndi:BPMNShape id="StartEvent_01ydzqe_di" bpmnElement="StartEvent_01ydzqe">
                <dc:Bounds x="532" y="72" width="36" height="36" />
                <bpmndi:BPMNLabel>
                  <dc:Bounds x="539" y="53" width="22" height="14" />
                </bpmndi:BPMNLabel>
              </bpmndi:BPMNShape>
              <bpmndi:BPMNEdge id="SequenceFlow_1qw929z_di" bpmnElement="SequenceFlow_1qw929z">
                <di:waypoint x="550" y="108" />
                <di:waypoint x="550" y="150" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNShape id="UserTask_1qxjy46_di" bpmnElement="Task_1piqdk6">
                <dc:Bounds x="500" y="150" width="100" height="80" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNShape id="ExclusiveGateway_0k39v3u_di" bpmnElement="ExclusiveGateway_0k39v3u" isMarkerVisible="true">
                <dc:Bounds x="525" y="275" width="50" height="50" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNEdge id="SequenceFlow_11h4o22_di" bpmnElement="SequenceFlow_11h4o22">
                <di:waypoint x="550" y="230" />
                <di:waypoint x="550" y="275" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNEdge id="SequenceFlow_1iu7pfe_di" bpmnElement="SequenceFlow_1iu7pfe">
                <di:waypoint x="575" y="300" />
                <di:waypoint x="680" y="300" />
                <di:waypoint x="680" y="380" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNShape id="UserTask_18pwui1_di" bpmnElement="Task_10fqcwp">
                <dc:Bounds x="630" y="380" width="100" height="80" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNEdge id="SequenceFlow_04uqww2_di" bpmnElement="SequenceFlow_04uqww2">
                <di:waypoint x="525" y="300" />
                <di:waypoint x="430" y="300" />
                <di:waypoint x="430" y="380" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNShape id="UserTask_1j0us24_di" bpmnElement="Task_15n23yh">
                <dc:Bounds x="380" y="380" width="100" height="80" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNShape id="ExclusiveGateway_1sq33g6_di" bpmnElement="ExclusiveGateway_1sq33g6" isMarkerVisible="true">
                <dc:Bounds x="525" y="515" width="50" height="50" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNEdge id="SequenceFlow_0c8wrs4_di" bpmnElement="SequenceFlow_0c8wrs4">
                <di:waypoint x="430" y="460" />
                <di:waypoint x="430" y="540" />
                <di:waypoint x="525" y="540" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNEdge id="SequenceFlow_1xod8nh_di" bpmnElement="SequenceFlow_1xod8nh">
                <di:waypoint x="680" y="460" />
                <di:waypoint x="680" y="540" />
                <di:waypoint x="575" y="540" />
              </bpmndi:BPMNEdge>
              <bpmndi:BPMNShape id="EndEvent_0pnmjd3_di" bpmnElement="EndEvent_0pnmjd3">
                <dc:Bounds x="532" y="602" width="36" height="36" />
              </bpmndi:BPMNShape>
              <bpmndi:BPMNEdge id="SequenceFlow_0h8za82_di" bpmnElement="SequenceFlow_0h8za82">
                <di:waypoint x="550" y="565" />
                <di:waypoint x="550" y="602" />
              </bpmndi:BPMNEdge>
            </bpmndi:BPMNPlane>
          </bpmndi:BPMNDiagram>
        </bpmn2:definitions>
      `;
      // 将字符串转换成图显示出来
      this.bpmnModeler.importXML(bpmnXmlStr, err => {
        if (err) {
          console.error(err);
        } else {
          this.adjustPalette();
        }
      });
    },
    // 调整左侧工具栏排版
    adjustPalette() {
      try {
        // 获取 bpmn 设计器实例
        const canvas = this.$refs.canvas;
        const djsPalette = canvas.children[0].children[1].children[4];
        const djsPalStyle = {
          width: "130px",
          padding: "5px",
          background: "white",
          left: "20px",
          borderRadius: 2
        };
        for (var key in djsPalStyle) {
          djsPalette.style[key] = djsPalStyle[key];
        }
        const palette = djsPalette.children[0];
        const allGroups = palette.children;

        // allGroups[3].style["display"] = "none";
        // allGroups[3].remove();
        allGroups[4].style["display"] = "none";
        allGroups[5].style["display"] = "none";
        allGroups[6].style["display"] = "none";
        allGroups[7].style["display"] = "none";

        // 修改控件样式
        for (var gKey in allGroups) {
          const group = allGroups[gKey];
          for (var cKey in group.children) {
            const control = group.children[cKey];
            const controlStyle = {
              display: "flex",
              justifyContent: "flex-start",
              alignItems: "center",
              width: "100%",
              padding: "5px"
            };
            if (
              control.className &&
              control.dataset &&
              control.className.indexOf("entry") !== -1
            ) {
              const controlProps = this.bpmData.getControl(
                control.dataset.action
              );
              control.innerHTML = `<div style='font-size: 14px;font-weight:500;margin-left:15px;'>${controlProps["title"]}</div>`;
              for (var csKey in controlStyle) {
                control.style[csKey] = controlStyle[csKey];
              }
            }
          }
        }
        allGroups[0].children[0].style.display = "none";
        allGroups[0].children[1].style.display = "none";
        allGroups[0].children[2].style.display = "none";
        allGroups[0].children[4].style.display = "none";
        allGroups[3].children[1].style.display = "none";

      } catch (e) {
        console.log(e);
      }
    },
    /**移除文件列表 */
    handleRemove(file) {
      for (let i = 0; i < this.fileList.length; i++) {
        if (file.name === this.fileList[i].name) {
          this.fileList.splice(i, 1);
        }
      }
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 后退
    handleUndo() {
      this.bpmnModeler.get("commandStack").undo();
    },
    // 前进
    handleRedo() {
      this.bpmnModeler.get("commandStack").redo();
    },
    // 流程图放大缩小
    handleZoom(radio) {
      console.log(!radio)
      const newScale = !radio
        ? 1.0 // 不输入radio则还原
        : this.scale + radio <= 0.2 // 最小缩小倍数
        ? 0.2
        : this.scale + radio;

      this.bpmnModeler.get("canvas").zoom(newScale);

      this.scale = newScale;
    },
    /**下载bpmn文件 */
    handleDownloadBpmn() {
      this.bpmnModeler.saveXML({ format: true }, (err, data) => {
        const dataTrack = "bpmn";
        const a = document.createElement("a");
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
          "href",
          `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(
            data
          )}`
        );
        a.setAttribute("target", "_blank");
        a.setAttribute("dataTrack", `diagram:download-${dataTrack}`);
        a.setAttribute("download", name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    },
    /**上传 文件 */
    handleOnchangeFile(file) {
      const reader = new FileReader();
      let data = "";
      reader.readAsText(file.raw);
      reader.onload = event => {
        data = event.target.result;
        this.bpmnModeler.importXML(data, err => {
          if (err) {
            this.$message.info("导入失败");
          } else {
            this.$message.success("导入成功");
          }
        });
      };
    },

    // 下载为SVG格式,done是个函数，调用的时候传入的
    handleDownloadSvg() {
      this.bpmnModeler.saveSVG({ format: true }, (err, data) => {
        // this.download('svg', data);
        const dataTrack = "svg";
        const a = document.createElement("a");
        const name = `diagram.${dataTrack}`;
        a.setAttribute(
          "href",
          `data:application/bpmn20-xml;charset=UTF-8,${encodeURIComponent(
            data
          )}`
        );
        a.setAttribute("target", "_blank");
        a.setAttribute("dataTrack", `diagram:download-${dataTrack}`);
        a.setAttribute("download", name);
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    }
  }
};
</script>
<style lang="scss">
.containerBox {
  // height: calc(100% - 30px);
  // position: relative;
  position: absolute;
  background-color: #ffffff;
  width: calc(100% - 10px);
  height: calc(100% - 48px);
  // height: 100%;
  // #container {
  //   height: 100%;
  // }
  .canvas {
    margin-top: 50px;
    width: 100%;
    height: calc(100% - 40px);
  }
  .panel {
    // position: absolute;
    right: 0;
    top: 50px;
    // width: 300px;
    // z-index: 99999;
  }
  .toolbar {
    // position: absolute;
    top: 20px;
    right: 350px;
  }
  a.bjs-powered-by {
    img {
      display: none;
    }
  }
}
</style>
